<style  lang="less" scoped>

  .query-con{
    width: 100%;
    flex: 1;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    flex-direction: column;
    .query-con__tit{
      width: 100%;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }
    .query-con__way{
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: space-around;
      >button{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
      }
    }
    .query_con_oem>button{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }
    .query_con_info{
      width:100%;
      display:flex;
      flex:1;
      >ul{
        display: flex;
        position: relative;
        justify-content:space-around;
        >li{

        }
      }
    }
  }

</style>
<template>
  <div class="container bg-gray">
    <!--banner组件-->
    <Banner :list="bannerList"></Banner>
    <!--查询方式-->
    <div class="query-con">
      <div class="query-con__tit text-nine text-14 m-b-10">———— 请选择查询方式 ————</div>
      <div class="query-con__way">
        <button class="text-14 m-r-20" :style="{color:getGlobalColor}">
          <i class="iconfont icon-cheliang- m-r-5" ></i>
          车型查询
        </button>
        <button class="text-14" :style="{color:getGlobalColor}">
          <i class="iconfont icon-4chejiahao m-r-5" ></i>
          车架号查询
        </button>
      </div>
      <div class="query_con_oem m-t-10" >
        <button class="text-14 center" :style="{color:getGlobalColor}">
          <i class="iconfont icon-sousuo m-r-5"></i>
          零件号查询

        </button>
      </div>
      <!--开通的权限选项-->
      <div class="query_con_info">
        <ul>
          <li>
            <button>
              <span></span>
            </button>
          </li>
        </ul>
      </div>
    </div>
    
  </div>
</template>

<script>
// banner 组件
import Banner from '@/base/Banner.vue'
import { mapActions, mapGetters } from 'vuex'
import {globalConfig} from '@/common/js/config'
export default {
  title: '汽修宝',
  data () {
    return {
      bannerList: [
        'http://mp-outsource.oss-cn-beijing.aliyuncs.com/upload/20180831/file5b892ef1ab176f669a6c0fd8.jpg?x-oss-process=style/640W_AH',
        'http://mp-outsource.oss-cn-beijing.aliyuncs.com/upload/20180831/file5b892ef1ab176f669a6c0fd8.jpg?x-oss-process=style/640W_AH'
      ]
    }
  },
  created() {
    // 初始化商家信息
    this._initMerchantInfo()
  },
  methods: {
    _initMerchantInfo() {
      
    },
    ...mapActions([
      'setGlobalColor'
    ])
  },
  computed: {
		...mapGetters([
			'getGlobalColor'
		])
	},
  
  components: {
    Banner
  }
}
</script>


